<template>
  <div class="page-grey">
    <div class="top">
      <span @click="$router.back()">
        <svg-icon icon-class="back" class="icon" />
      </span>
      <span class="center">我的</span>
    </div>
    <div class="content">
      <div class="header">
        <div>
          <p>用户名：小可爱</p>
          <p>账号：110110</p>
        </div>
        <img src="../../assets/images/avatar.png" class="avatar" />
      </div>
      <div class="wallet">
        <p class="w-top">
          <span>
            <img src="../../assets/images/w-icon2.png" />
            我的钱包（元）
          </span>
          <span>今日盈利：{{ 5000000 }}</span>
        </p>
        <p>余额：{{ 100000 }}元</p>
        <div class="btn">
          <button @click="jump('fund')">交易明细</button>
          <button @click="jump('withdraw')">提现</button>
          <button @click="jump('recharge')">充值</button>
        </div>
      </div>
    </div>
    <div class="tabs">
      <van-cell
        v-for="i in tabs"
        :key="i.id"
        :to="i.href"
        :title="i.title"
        is-link
      >
        <img
          class="icon"
          slot="icon"
          :src="require(`../../assets/icon/icon${i.id}.png`)"
        />
      </van-cell>
    </div>
    <div class="big-btn">退 出</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { id: 1, href: "lixibao", title: "利息宝" },
        { id: 2, href: "offline", title: "直属下线" },
        { id: 3, href: "address", title: "地址管理" },
        { id: 4, href: "record", title: "搜单记录" },
        { id: 5, href: "share", title: "我要分享" },
        { id: 6, href: "down", title: "客服端下载" },
        { id: 7, href: "setting", title: "设置" }
      ]
    };
  },
  methods: {
    jump(link) {
      this.$router.push({ name: link });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #fff;
  padding: 15px 10px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > div p {
      line-height: 2;
      &:nth-child(1) {
        font-size: 15px;
      }
    }
    .avatar {
      width: 50px;
      border-radius: 50%;
      box-shadow: 0 0 5px #ddd;
    }
  }
}
.tabs {
  border-top: 1px solid #ebedf0;
  background-color: #fff;
}
.icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  margin-right: 8px;
}
</style>
